<template>
	<view class="login">
		<!-- 注册 -->
		<view class="navWrap">
			<!-- <van-icon name="arrow-left" @tap="back"/> -->
			<!-- <view class="register">注册</view> -->
		</view>

		<!-- 登录提示 -->
		<view class="phoneWarn">
			<view>授权手机号</view>
			<view>未注册的手机号将自动创建账号</view>
		</view>
		<!-- 输入框 -->
		<view class="iptWrap">
			<button class="buttonSyl" @getphonenumber="getPhoneNumber" open-type="getPhoneNumber">
				手机快捷登录</button>
<!-- 			<van-field
				:value="username"
				clearable
				label="用户名"
				placeholder="请输入用户名"
				@change="getUsername"
			/>
 
			<van-field
				:value="password"
				:type="type"
				label="密码"
				placeholder="请输入密码"
				icon="closed-eye"
				@click-icon="showPWD"
				@change="getPWD"
			/>
			<view class="checkBox">
				<van-checkbox checked-color="#FF7F22" :value="checked" @change="onChangeCheckBox"></van-checkbox>
				<view class="checkBoxDetails">我已阅读并同意<text style="color:#FF7F22">《他说用户服务协议》</text>以及<text style="color:#FF7F22">《隐私政策》</text></view>
			</view>
			<van-button color="#FF7F22" block @tap="login">立即登录</van-button>
			<view class="forgotPWD">忘记密码？</view> -->
		</view>

<!-- 		<view class="other">
			<view class="loginWay">其他登录方式</view>
			<button class="buttonSyl" @getphonenumber="getPhoneNumber" open-type="getPhoneNumber"><van-icon name="wechat" size="30px" /></button>
		</view> -->
		<van-toast id="van-toast" />
	</view>
</template>

<script>
import { phoneLoginAPI, getPhoneLoginAPI, isGetUserinfoAPI } from '../../../utils/api';
import { socketURL } from '../../../utils/baseUrl.js'
import Toast from '@/wxcomponents/@vant/weapp/toast/toast';
export default{
	data(){
		return{
			username:'',
			password:'',
			type:'password',
			checked: false,
			loginCode:''
		}
	},
	// onLoad(){
	// 	let _this = this;
	// 	uni.login({    
	// 		success: function(res) {    
	// 			// 获取code    
	// 			console.log(JSON.stringify(res));   
	// 			_this.loginCode = res.code;  
	// 		}  
	// 	});  

	// },
	methods: {
		// 返回上一页
		// back(){
		// 	uni.navigateBack()
		// },
		// 登录
		async login(){
			if(this.checked){
				const _this = this;
				// if(this.username == '' || this.password == ''){
				// 	Toast.fail('请输入用户名和密码');
				// }
				
				try {
					uni.login({    
						success: async function(res) {   
							console.log( res.code,'res======================');
							const params = {
								username: _this.username,
								password: _this.password,
								js_code: res.code
							}
							const result = await phoneLoginAPI(params);
							if(result.code == 200){
								uni.setStorageSync('token', result.result.token);
								uni.setStorageSync('userInfo',result.result.userInfo)
								uni.setStorageSync('userId',result.result.userInfo.id);
								uni.setStorageSync('phone', result.result.userInfo.phone);
								uni.setStorageSync('openid', result.result.openid);
								const isUpdateRes = await isGetUserinfoAPI(result.result.userInfo.id)
								console.log('isUpdateRes==========>',isUpdateRes)
								if(isUpdateRes.result){
									// uni.navigateBack()
									uni.reLaunch({
										url:'/pages/tabbar/home/home'
									})
								}else{
									uni.reLaunch({
										url:'../../../subPackagesA/addUserInfo/addUserInfo'
									})
								}
								
							}
						}  
					});  
					
				} catch (error) {
					
				}
			}else{
				Toast.fail('请选择协议');
			}
		},

		// 获取用户手机号
        async getPhoneNumber (e) {
			console.log('e======>',e)
			if(e.detail.errMsg == "getPhoneNumber:ok"){
				let _this = this;
				try {
					uni.login({    
						success: async function(res) {    
							console.log(res,'==================');
							const result = await getPhoneLoginAPI(res.code,e.detail.code);
							if(result.code == 200){
								uni.setStorageSync('token', result.result.token);
								uni.setStorageSync('userInfo',result.result.userInfo);
								uni.setStorageSync('userId',result.result.userInfo.id);
								uni.setStorageSync('phone', result.result.userInfo.phone);
								uni.setStorageSync('openid', result.result.openid);
								// socket连接
								uni.connectSocket({
									url: `${socketURL}/websocket/${result.result.userInfo.id}`,
									header:{
										'content-type': 'application/json',
										'X-Access-Token':uni.getStorageSync("token") || ""
									},
									success() {
										console.log('WebSocket连接成功');
										uni.onSocketOpen(function (res) {
											console.log('WebSocket连接已打开！');
										});
										uni.onSocketError(function (res) {
											console.log('WebSocket连接打开失败，请检查！',res);
										});
									},
									fail(err) {
										console.error('WebSocket连接失败', err);
									}
								});
								const isUpdateRes = await isGetUserinfoAPI(result.result.userInfo.id)
								console.log('isUpdateRes==========>',isUpdateRes)
								if(isUpdateRes.result){
									uni.reLaunch({
										url:'/pages/tabbar/home/home'
									})
								}else{
									uni.reLaunch({
										url:'../../../subPackagesA/pages/addUserInfo/addUserInfo'
									})
								}
							}
						}  
					});  
					
				} catch (error) {
					
				}
			}
			
        },

		// 获取用户名
		getUsername(e){
			this.username = e.detail;
		},

		// 获取密码
		getPWD(e){
			this.password = e.detail;
		},


		// 复选框选中与否
		onChangeCheckBox(){
			this.checked = !this.checked
		},

		// 密码显示与隐藏
		showPWD(){
			this.type = this.type == 'text' ? 'password' : 'text'
			console.log('哈哈哈')
		},
	},
}
</script>

<style lang="less">
.login{
	width: 100%;
	position: relative;
}

// 其他登录方式

.buttonSyl{
	background-color: #FF7F22;
	color: #fff;
	border-radius: 8rpx;
	font-size: 14px;

}

.buttonSyl::after{
	border: none !important;
}

.other{
	width: 100%;
	position: fixed;
	bottom: 80rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	.loginWay{
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #888889;
		margin-bottom: 40rpx;
	}
}

.forgotPWD{
	font-size: 24rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #878788;
	line-height: 32rpx;
	text-align: right;
	margin-top: 20rpx;
}
.checkBox{
	margin: 40rpx 0;
	display: flex;
	align-items: center;
	.checkBoxDetails{
		height: 36rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #59595D;
	}
}
// input输入框
.iptWrap{
	margin-top: 100rpx;
	padding: 0 30rpx;
}

/* 登录提示 */
.phoneWarn{
	margin-top: 26rpx;
	padding-left: 30rpx;
	:first-child{
		font-size: 44rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #222229;
		line-height: 60rpx;
	}
	:nth-child(2){
		width: 338rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #888889;
		line-height: 42rpx;
	}
}

/* 注册 */
.navWrap{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 160rpx 30rpx 60rpx 30rpx;
}
</style>